<template>
    <div>
         <!-- 面包屑导航条 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>权限管理</el-breadcrumb-item>
        <el-breadcrumb-item>系统用户</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
             <el-form :inline="true" class="toolbar">
                <el-form-item>
                <el-button @click="add()" type="success">添加用户</el-button>
                </el-form-item>
            </el-form>
            <el-table :data="dataList" highlight-current-row v-loading="gridLoading" class="grid" style="width: 100%;">
                <el-table-column label="姓名" prop="name" >
                </el-table-column>
                <el-table-column label="状态" width="100">
                    <template slot-scope="scope">
                    <el-tag :type="scope.row.isDel==1 ? 'danger' : 'primary'"  close-transition>{{scope.row.status==1?'禁用':'启用'}}</el-tag>
                    </template>
                </el-table-column>
                 <el-table-column label="角色" prop="ruleGroup" >
                     <template slot-scope="scope">
                         <el-tag>{{getuserRO(scope.row.ruleGroup)}}</el-tag>
                     </template>
                      <!-- <template scope="scope">
                    <el-tag v-for="item in (scope.row.roles.split(','))" v-if="item" :key="item" type="primary" style="margin-right:2px;">{{ item.split('|')[1]}}</el-tag>
                </template> -->
                </el-table-column>
                  <el-table-column label="操作" >
                    <template slot-scope="scope">
                    <el-button size="small" @click="edit(scope.row)">编辑</el-button>
                    <el-button size="small" @click="change(scope.row)">修改密码</el-button>
                    </template>
                   
                </el-table-column>
            </el-table>
        </el-card>
          <!--添加用户-->
            <el-dialog title="添加用户" :visible.sync="addDialogVisible" :close-on-click-modal="false" size="small">
                <el-form :model="addForm" label-position="left" label-width="100px" :rules="inputRule" ref="addForm">
                    <el-form-item label="用户名" prop="name">
                    <el-input v-model="addForm.name" auto-complete="off"></el-input>
                    </el-form-item>
                    <!-- <el-form-item label="密码" prop="password">
                    <el-input v-model="addForm.password" auto-complete="off"></el-input>
                    </el-form-item> -->
                    <el-form-item label="备注" prop="introduction">
                    <el-input type="textarea" v-model="addForm.introduction" auto-complete="off" :maxlength="20"></el-input>
                    </el-form-item>
                    <el-form-item label="角色" prop="ruleGroup">
                        <!-- <el-select v-model="searchForm.roleId" clearable>
                            <el-option v-for="item in roleList" :key="item.id" :label="item.roleName" :value="item.id">
                            </el-option>
                        </el-select> -->
                          <el-radio-group v-model="addForm.ruleGroup">
                          <el-radio v-for="item in roleslist" :key="item.id" :label="item.id">{{item.description}}</el-radio>
                          <!-- <el-radio :label="6">备选项</el-radio>
                          <el-radio :label="9">备选项</el-radio> -->
                        </el-radio-group>
                    <!-- <el-checkbox-group v-model="addForm.ruleGroup">
                        <el-checkbox v-for="item in roleslist" :key="item.id" :label="item.id">{{item.description}}</el-checkbox>
                    </el-checkbox-group> -->
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="addDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="addFormSubmit" :loading="addFormLoading">提 交</el-button>
                </div>
            </el-dialog>
            <!--密码-->
               <el-dialog title="修改密码" :visible.sync="changDialogVisible" :close-on-click-modal="false" size="small">
                <el-form :model="changForm" label-position="left" label-width="100px" :rules="inputRule" ref="addForm">
               
                    <el-form-item label="新密码" prop="password">
                    <el-input v-model="changForm.password" auto-complete="off"></el-input>
                    </el-form-item>
                  
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="changDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="changFormSubmit" :loading="addFormLoading">提 交</el-button>
                </div>
            </el-dialog>
        <!-- 修改 -->
        <el-dialog title="修改用户" :visible.sync="editDialogVisible" :close-on-click-modal="false" size="small">
                <el-form :model="editForm" label-position="left" label-width="100px" :rules="inputRule" ref="editForm">
                    <el-form-item label="用户名" prop="name">
                    <el-input v-model="editForm.name" auto-complete="off"></el-input>
                    </el-form-item>
                    <!-- <el-form-item label="密码" prop="password">
                    <el-input v-model="editForm.password" auto-complete="off"></el-input>
                    </el-form-item> -->
                    <el-form-item label="备注" prop="introduction">
                    <el-input type="textarea" v-model="editForm.introduction" auto-complete="off" :maxlength="20"></el-input>
                    </el-form-item>
                     <el-form-item label="状态" prop="status">
                    <el-switch v-model="editForm.isDel" active-text="启用" inactive-text="禁用" on-text="启用" off-text="禁用"></el-switch>
                    </el-form-item>
                    <el-form-item label="角色" prop="ruleGroup">
                        <!-- <el-select v-model="searchForm.roleId" clearable>
                            <el-option v-for="item in roleList" :key="item.id" :label="item.roleName" :value="item.id">
                            </el-option>
                        </el-select> -->
                        <el-radio-group v-model="editForm.ruleGroup">
                          <el-radio v-for="item in roleslist" :key="item.id" :label="item.id">{{item.description}}</el-radio>
                          <!-- <el-radio :label="6">备选项</el-radio>
                          <el-radio :label="9">备选项</el-radio> -->
                        </el-radio-group>
                        <!-- <el-checkbox-group v-model="editForm.ruleGroup">
                            <el-checkbox v-for="item in roleslist" :key="item.id" :label="item.id">{{item.description}}</el-checkbox>
                        </el-checkbox-group> -->
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="editDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="editFormSubmit" :loading="editFormLoading">提 交</el-button>
                </div>
            </el-dialog>
    </div>
</template>
<script>
export default {
  data() {
    return {
      dataList: [],
      value1: "",
      editForm: {
        id: 0, //
        name: "", //
        introduction: "",
        isDel: 0,
        password: "", //
        ruleGroup: 1 //
      },
       changForm: {
        id: 0, //
        name: "", //
        introduction: "",
        isDel: 0,
        password: "", //
        ruleGroup: [] //
      },
      addForm: {
        id: 0, //
        name: "", //
        introduction: "",
        password: "", //
        ruleGroup: 9 //
      },
      roleslist: [],
      addDialogVisible: false,
      editDialogVisible: false,
      changDialogVisible: false,
    };
  },
  mounted() {
    this.getsystemList();
    this.getRolesList();
  },
  methods: {
    //点击编辑
    change(row) {
      console.log(row)
      this.changDialogVisible = true;
      this.changForm.id = row.id;
      this.changForm.name = row.name;
      this.changForm.introduction = row.introduction;
      // this.changForm.ruleGroup = this.getRoleIdstest(row.ruleGroup);
      this.changForm.ruleGroup = row.ruleGroup
    //   this.changForm.password = row.password;
      this.changForm.isDel = row.isDel == 0;
    },
    edit(row) {
      // alert(2)
      console.log(row);
      this.editDialogVisible = true;
      this.editForm.id = row.id;
      this.editForm.name = row.name;
      this.editForm.introduction = row.introduction;
      this.editForm.ruleGroup = row.ruleGroup
      // this.editForm.ruleGroup = this.getRoleIdstest(row.ruleGroup);
      console.log(this.editForm.ruleGroup)
    //   this.editForm.password = row.password;
      this.editForm.isDel = row.isDel == 0;
    },
    changFormSubmit() {
        let _data = Object.assign({}, this.changForm);
      _data.isDel = _data.isDel ? "0" : "1";
      // _data.ruleGroup = _data.ruleGroup.join(",");
      console.log(_data);
       this.$http.post("/manage/admin/addEditSysUser", _data).then(res => {
        //  console.log(res)
         this.changDialogVisible = false;
        if (res.data.status == 1) {
          this.getsystemList();
          this.$message({
            message: "修改成功",
            type: "success"
          });
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    editFormSubmit() {
      let _data = Object.assign({}, this.editForm);
      _data.isDel = _data.isDel ? "0" : "1";
      // _data.ruleGroup = _data.ruleGroup.join(",");
      console.log(_data);
      this.$http.post("/manage/admin/addEditSysUser", _data).then(res => {
        //  console.log(res)
         this.editDialogVisible = false;
        if (res.data.status == 1) {
          this.getsystemList();
          this.$message({
            message: "修改成功",
            type: "success"
          });
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    getRoleIdstest(list) {
      var _arr = [];
      _arr.push(list);
      return _arr;
    },
    getRoleIds(list) {
      console.log(list);
      var _arr = [];
      for (let i = 0; i < list.length; i++) {
        _arr.push(Number(list[i].split("|")[0]));
      }
      return _arr;
    },
    add() {
      //   alert(2)
      this.addDialogVisible = true;
    },
    addFormSubmit() {
      let _data = Object.assign({}, this.addForm);

      // _data.ruleGroup = _data.ruleGroup.join(",");
      console.log(_data);
      //
      this.$http.post("/manage/admin/addEditSysUser", _data).then(res => {
        //  console.log(res)
        this.addDialogVisible = false
        if (res.data.status == 1) {
          this.getsystemList();
          this.$message({
            message: "添加成功",
            type: "success"
          });
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    getuserRO(type) {
      //   this.roleslist.forEach()
      let re = "";
      this.roleslist.forEach(obj => {
        if (obj.id == type) {
          re = obj.description;
          return;
        }
      });
      return re;
    },
    getRolesList() {
      // POST
      this.$http.post("/manage/admin/getAllRuleGroup").then(res => {
        // console.log(res)
        if (res.data.status == 1) {
          this.roleslist = res.data.data;
          console.log(this.roleslist);
        } else {
          this.$message.error(res.data.message);
        }
      });
      // const { data: res } = await this.$http.get('roles')
      // if (res.meta.status !== 200) return this.$message.error('获取角色列表失败！')
      // this.roleslist = res.data
      // console.log(res.data)
    },
    getsystemList() {
      this.$http.post("/manage/admin/getAllUser", {}).then(res => {
        console.log(res);
        if (res.data.status == 1) {
          this.dataList = res.data.data;
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
</style>
